<template>
    <page-body>
        <view class="page">
            <view class="flex benben-position-layout flex flex-wrap align-center flex_0_ibhf" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-center justify-between flex-sub fd0_0_ibhf'>
                    <view class='flex flex-wrap align-center fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  fd0_0_c0_c0_ibhf'>&#xE794;</text>
                    </view>
                    <view class='flex flex-wrap align-stretch justify-center'>
                        <text class='fd0_0_c1_c0_ibhf'>课程班级</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-end fd0_0_c0_ibhf'>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout flex_1_ibhf">
                <template v-for='(item,key0) in list' v-if="list.length>0 && isup">
                    <view class='flex flex-wrap align-center fd1_0_ibhf' :key='key0' @tap.stop="goitem(item)">
                        <image class='fd1_0_c0_ibhf' mode="aspectFit" :src='STATIC_URL+"bjq.png"'></image>
                        <view class='flex flex-direction align-stretch flex-sub'>
                            <text class='fd1_0_c1_c0_ibhf'>{{item.teachingclass_name}}</text>
                            <text class='fd1_0_c1_c1_ibhf'>学生人数：{{item.student_num}}人</text>
                        </view>
                        <!-- <text class='fd1_0_c2_ibhf'>09-10</text> -->
                    </view>
                </template>
				<view v-if="list.length==0 && isup">
				  <slot>
				    <view class="public-page-empty">
				      <image src='/static/global/order.png'></image>
				      <view class="txt">暂无数据</view>
				    </view>
				  </slot>
				</view>
            </view>
			<view class="flex benben-position-layout flex flex-wrap align-center prepare_flex_4"
				:style="{height:(110+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
				<button class='prepare_fd4_0' @click="popupShow1758159673073 = true">新增班级</button>
			</view>
			<view :style="{height: (110+bottomSafeAreaRpx)+'rpx'}"></view>
			<benben-popup v-model="popupShow1758159673073" :mask="true" :mask-close-able="true" mode='center'
				:z-index='9999' background-color='rgba(0, 0, 0, 0.5)'>
				<!---flex布局2flex布局开始-->
				<view class="flex flex-wrap align-center justify-center benben-flex-layout people_flex_3_ibhf">
					<view class='flex flex-direction align-center people_fd3_0_ibhf'>
						<view class='flex flex-direction align-center justify-center people_fd3_0_c0_ibhf'>
							<text class='people_fd3_0_c0_c0_ibhf'>新增班级</text>
						</view>
						<view class='flex flex-wrap align-center people_fd3_0_c1_ibhf'>
							<benben-input class='flex-sub people_fd3_0_c1_c0_ibhf' type="text"
								:placeholder="inputname" confirm-type="done" :maxlength="-1"
								:adjust-position='true' v-model="inputone"
								placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" />
						</view>
						<view class='flex flex-wrap align-center people_fd3_0_c1_ibhf'>
							<benben-input class='flex-sub people_fd3_0_c1_c0_ibhf' type="text" :placeholder="inputsort"
								confirm-type="done" :maxlength="-1" :adjust-position='true' v-model="inputtwo"
								placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" />
						</view>
						<view class='flex flex-wrap align-center people_fd3_0_c3_ibhf'>
							<view class='flex flex-wrap align-center justify-center people_fd3_0_c3_c0_ibhf' @tap.stop="popupShow1758159673073 = false">
								<text>取消</text>
							</view>
							<view class='flex flex-wrap align-center justify-center people_fd3_0_c3_c1_ibhf' @tap.stop="tj">
								<text>提交</text>
							</view>
						</view>
					</view>
				</view>
			
				<!---flex布局2flex布局结束-->
			
			</benben-popup>
			

            <!---flex布局flex布局结束-->


        </view>
    </page-body>
</template>
<script>
    export default {
        components: {},


        data() {
            return {
				isup:false,
				course:'',//课程id
                "list": [], 
				popupShow1758159673073:false,//新增班级弹框
				inputone:'',
				inputtwo:'',
				inputname:'请输入班级名称，必填项',
				inputsort:'请输入班级描述，非必填'
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {
			this.course=options.course
			this.get_list()
			let _this=this
			uni.$on('addstatus', (data) => {
				_this.get_list()
			});
			
        },
        onUnload() {
			uni.$off('addstatus');
        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {
			this.get_list()
        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
			async get_list() {
				let res = await this.$api.post(global.apiUrls.post68cbb4938e941, {
					course_id: this.course,//课程ID
				})
				this.isup=true
				if (res.data.code == 1) {
					console.log(res.data.data)
					this.list=res.data.data
				}
			},
			async tj(){
				if(!this.inputone){
					this.$message.info('请输入班级名称')
					return
				}
				let res = await this.$api.post(global.apiUrls.post68d0a31e88610, {
					teachingclass_name:this.inputone,
					teachingclass_describe:this.inputtwo,
					course_id: this.course,//课程ID
				})
				this.popupShow1758159673073=false
				if (res.data.code != 1) {
					this.$message.info(res.data.msg)
					return
				}
				this.inputone=''
				this.inputtwo=''
				this.get_list()
			},
			goitem(item){
				uni.navigateTo({
					url:'/pages/kc/kcbjpeople/kcbjpeople?name='+item.teachingclass_name+'&id='+item.teachingclass_id
				})
			}
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: var(--benbenbgColor1);
        background-size: 100% auto;
		.public-page-empty {
		  display: flex;
		  justify-content: center;
		  flex-direction: column;
		  align-items: center;
		  padding: 120upx 0 0 0;
		  image {
		    width: 300rpx;
		    height: 300rpx;
		  }
		
		  .txt {
		    font-size: 28upx;
		    color: $uni-text-color;
		    text-align: center;
		    line-height: 100upx;
		    color: var(--benben-loading-color, #999999);
		  }
		  .loadTips {
		    line-height: 30upx;
		  }
		
		  .btn {
		    width: 260upx;
		    height: 78upx;
		    line-height: 78upx;
		    background: linear-gradient(309deg, rgba(254, 49, 0, 1) 0%, rgba(255, 90, 16, 1) 100%);
		    opacity: 1;
		    border-radius: 44upx;
		    font-size: 28upx;
		    color: #fff;
		    text-align: center;
		    margin-top: 100upx;
		  }
		}
        .flex_1_ibhf {
            padding: 24rpx;

            .fd1_0_ibhf {
                padding: 24rpx 0rpx 24rpx 0rpx;
                border-bottom: 1px solid #eee;

                .fd1_0_c0_ibhf {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 40rpx;
                    margin: 0rpx 20rpx 0rpx 0rpx;
                }

                .fd1_0_c1_c0_ibhf {
                    font-size: 32rpx;
                    font-weight: 600;
                }

                .fd1_0_c1_c1_ibhf {
                    margin: 4rpx 0rpx 0rpx 0rpx;
                    font-size: 24rpx;
                    color: rgba(153, 153, 153, 1);
                }

                .fd1_0_c2_ibhf {
                    color: rgba(153, 153, 153, 1);
                }
            }
        }

        .flex_0_ibhf {
            width: 750rpx;
            height: 88rpx;
            overflow: hidden;
            z-index: 10;
            top: 0rpx;
            background: #fff;
            background-size: 100% auto !important;

            .fd0_0_ibhf {
                padding: 0rpx 32rpx 0rpx 32rpx;

                .fd0_0_c1_c0_ibhf {
                    font-size: 36rpx;
                    font-weight: 700;
                    color: #333333;
                    line-height: 50rpx;
                }
            }
        }

        .fd0_0_c0_ibhf {
            width: 120rpx;

            .fd0_0_c0_c0_ibhf {
                font-size: 36rpx;
                color: #333;
            }
        }
    }
	.prepare_flex_4 {
		width: 750rpx;
		height: 110rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		left: 0rpx;
		border-radius: 0rpx;
		.prepare_fd4_0 {
				background: #4781f5;
				width: 100%;
				line-height: 110rpx;
				font-size: 32rpx;
				color: #fff;
				border-radius: 0rpx;
			}
	}
	.people_flex_3_ibhf {
		width: 622rpx;
		margin: 0rpx 0rpx 0rpx 64rpx;
	
		.people_fd3_0_ibhf {
			background: #FFFFFF;
			width: 622rpx;
			height: 530rpx;
			border-radius: 16rpx;
	
			.people_fd3_0_c0_ibhf {
				margin: 48rpx 0rpx 48rpx 0rpx;
	
				.people_fd3_0_c0_c0_ibhf {
					font-size: 36rpx;
					color: #333;
					font-weight: 600;
				}
			}
	
			.people_fd3_0_c3_ibhf {
				color: var(--benbenFontColor3);
				font-size: 32rpx;
	
				.people_fd3_0_c3_c0_ibhf {
					background: #F4F8FD;
					width: 240rpx;
					height: 88rpx;
					margin: 0rpx 44rpx 0rpx 0rpx;
					border-radius: 44rpx;
					color: rgba(20, 94, 253, 1);
					font-size: 32rpx;
				}
	
				.people_fd3_0_c3_c1_ibhf {
					background: #145EFD;
					width: 240rpx;
					height: 88rpx;
					border-radius: 44rpx;
				}
			}
	
			.people_fd3_0_c1_ibhf {
				border: 1px solid #F2F4F7;
				background: #F6F7FA;
				width: 526rpx;
				height: 84rpx;
				margin: 0rpx 0rpx 24rpx 0rpx;
				border-radius: 12rpx;
				padding: 0 24rpx;
			}
		}
	}
	.hid1{
		max-width: 580rpx;
	}
</style>